<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>composition - 声明周期函数</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="root"></div>
	<script>
		// computed 计算属性
		const app = Vue.createApp({
			template:
			`<div @click="handleClick">
				hello world
				</div>`,
			setup() {
				// beforeCreate, created  没有 setup执行的时间在beforeCreate和created之间
				// beforeMount => onBeforeMount
				// mounted => onMounted
				// beforeUpdate => onBeforeUpdate
				// updated => onUpdated
				// beforeUnmount => onBeforeUnmount
				// destroyed => onUnmount
				// destroyed
				// onRenderTracked 每次渲染后重新收集响应式依赖，每次渲染就会执行一次
				// onRenderTriggered 每次触发页面重新渲染就会自动执行
				const  { ref,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,
				onBeforeUnmount,onUnmount, onRenderTracked, onRenderTriggered} = Vue
				const name = ref('dell')
				onBeforeMount(()=>{
					console.log('onBeforeMount')
				})
				onMounted(()=>{
					console.log('onMounted')
				})
				onBeforeUpdate(()=>{
					console.log('onBeforeUpdate')
				})
				onUpdated(()=>{
					console.log('onUpdated')
				})
				onRenderTracked(()=>{
					console.log('onRenderTracked')
				})
				onRenderTriggered(()=>{
					console.log('onRenderTriggered')
				})
				const handleClick =()=>{
					name.value ='lee'
				}
				return {
					name,handleClick
				}
			},
		})
		const vm = app.mount('#root');
	</script>
</body>
</html>